<template>
    <div class="productChoose">
        <slot class = 'title'></slot>
        <div class="content">
            <ul>
                <li v-for = "(item,index) in dimensionData.productDimension" :key = "index" @click ="chooseDimension(item,index)"
                 :class = "indexClick===index&&item.bgFlag? 'active':''">
                    {{item.planName}}
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
export default {
	props: ['dimensionCode', 'dimensionData'],
	data() {
		return {
			indexClick: '',
		}
	},
	methods: {
		addFlag: function() {
			// 遍历加字段的方法，为了vue的响应式，通过$set方法去添加属性
			this.dimensionData.productDimension.forEach(it => {
				this.$set(it, 'bgFlag', false)
				//     下面的方法有可能不能及时响应，需要通过强制更新的方法
				//     it.bgFlag: false
				//     this.$forceUpdate()
			})
		},
		chooseDimension(item, index) {
			this.indexClick = index
			if (item.bgFlag) {
				item.bgFlag = false
			} else {
				item.bgFlag = true
			}
		},
	},
	mounted() {
		this.addFlag()
	},
}
</script>
<style>
li {
	padding: 10px 0;
	border-bottom: 1px solid #dcdcdc;
}
.active {
	background: pink;
}
</style>

